import React, { useState, useEffect } from "react";
import { useHistory } from "react-router-dom";
import './FoodCard.scss'
import cx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardMedia from '@material-ui/core/CardMedia';
import CardContent from '@material-ui/core/CardContent';
import CardActionArea from '@material-ui/core/CardActionArea';

import Chip from '@material-ui/core/Chip';
import TagFacesIcon from '@material-ui/icons/TagFaces';
import FaceIcon from '@material-ui/icons/Face';
import FavoriteIcon from '@material-ui/icons/Favorite';
import api, { types } from '../../api'
import qs from 'qs'

const STATIC_PATH = import.meta.env.VITE_STATIC_PATH;
const useStyles = makeStyles(() => ({
    root: {
        maxWidth: 343,
        margin: 'auto',
        // borderRadius: 12,
        // padding: 12,
    },
    media: {
        // borderRadius: 6,
        height: 200
    },
    subTitle: {
        fontSize: 14,
    },
    dish: {
        paddingTop: 20
    }
}));

interface Props extends types.Module {

}


const FoodCard: React.FC<Props> = (props) => {
    const { name, describe, cookbooks } = props;
    const styles = useStyles();
    const history = useHistory();

    // 定义类型
    type Color = 'inherit' | 'primary' | 'secondary' | 'default';
    type Exclude<T, U> = T extends U ? never : T;
    type ProficiencyEnumType = {
        [k in 'perfect' | 'hasNotStarted' | 'inProgress']: {
            color: Exclude<Color, 'inherit'>;
            icon: any
        }
    }

    const proficiencyEnum: ProficiencyEnumType = {
        perfect: {
            color: 'primary',
            icon: <FavoriteIcon />
        },
        hasNotStarted: {
            color: 'default',
            icon: <FaceIcon />
        },
        inProgress: {
            color: 'secondary',
            icon: <TagFacesIcon />
        }
    }

    const handleChipClick = ({ name, id, proficiency }: { name: string, id: string, proficiency: string }) => {
        // 跳转做法页
        history.push({
            pathname: 'practice',
            search: qs.stringify({
                id,
            })
        })
    }

    const getChip = () => cookbooks.map(({ name, id, proficiency }) =>
        <Chip
            variant="outlined"
            key={id}
            label={name}
            color={proficiencyEnum[proficiency].color}
            icon={proficiencyEnum[proficiency].icon}
            onClick={() => handleChipClick({ name, id, proficiency })}
        />)

    return (
        <Card className={cx(styles.root)}>
            <CardActionArea>
                <CardMedia
                    className={cx(styles.media)}
                    image={
                        `${STATIC_PATH}/static/images/beef.jpg`
                    }
                />
            </CardActionArea>

            <CardContent>
                <h3>{name}</h3>
                <span className={cx(styles.subTitle)}> {describe} </span>

                <div className={`${cx(styles.dish)} dish-div`}>
                    {getChip()}
                </div>
            </CardContent>
        </Card>
    );
};

export default FoodCard